<template>
  <el-table
    :data="tableData"
    :row-class-name="rowClassName"
    size="small"
    @selection-change="handleSelectionChange"
    @row-click="handleRowClick"
  >
    <template v-for="item of columns" :key="item.prop">
      <el-table-column
        v-if="item.render && item.tooltip"
        :label="item.label"
        :align="item.align || 'center'"
        :min-width="item.width || ''"
        header-align="center"
      >
        <template #default="scope">
          <el-tooltip :content="item.tooltip.text + scope.row[item.tooltip.prop]" placement="right">
            <component :is="item.render" :row="scope.row"/>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="item.render"
        :label="item.label"
        :align="item.align || 'center'"
        :min-width="item.width || ''"
        header-align="center"
      >
        <template #default="scope">
          <component :is="item.render" :row="scope.row"/>
        </template>
      </el-table-column>
      <el-table-column v-else
        :type="item.type || 'default'"
        :prop="item.prop"
        :label="item.label"
        :align="item.align || 'center'"
        :min-width="item.width || ''"
        header-align="center"
      />
    </template>
    <slot />
  </el-table>
</template>

<script setup>

const props = defineProps({
  tableData: {
    type: Array,
    required: true,
  },
  columns: {
    type: Array,
    required: true,
  },
  rowClassName: {
    type: Function,
    default: () => {}
  },
})
const emits = defineEmits(['selection-change', 'rowClick'])
const handleSelectionChange = (val) => {
  emits('selection-change', val)
}
const handleRowClick = (row, columns, event) => {
  emits('rowClick', { row, columns })
}
</script>

<style lang="less" scoped>
.el-table {
  margin-bottom: 10px;
}
</style>
